@import (reference) '~@/resources/assets/css/variable.less';
.theme(@layer-color, @edge-stroke, @node-fill, @node-name, @link-stroke, @anchor-color, @mask-color, @cluster-color) {
  @node-removeIcon: @link-stroke;
  .graph /deep/ .layer text {
    fill: @layer-color;
  }
  .graph /deep/ .normalnode text {
    fill: @layer-color;
  }
  .graph /deep/ .selectednode text {
    fill: @cluster-color !important;
    text-decoration: underline;
    font-weight: bold;
  }
  .graph /deep/ .cluster text {
    fill: @layer-color;
    font-family: Arial;
    font-size: 12px;
  }
  .graph /deep/ .cluster polygon {
    fill: @cluster-color;
    fill-opacity: 0.1;
    stroke: @cluster-color;
    stroke-opacity: 0.1;
  }
  .graph /deep/ .edge path {
    stroke: @edge-stroke;
  }
  .graph /deep/  .edge polygon {
    stroke: @edge-stroke;
    fill: @edge-stroke;
  }
  .graph /deep/ .edge text {
    fill: @edge-stroke;
  }

  .graph /deep/ .abstract_ci {
    image {
      filter: grayscale(100%);
    }
  }

  .graph /deep/ text{
    user-select: none;
  }

  .graph /deep/ .virtual_ci {
    image {
      filter: invert(0.4);
    }
  }
}

html {
  .theme(@default-text, @default-bg-code, @default-dividing, @default-title, @default-icon, @default-blockbg, @default-background, @default-primary-color);

  &.theme-dark {
    .theme(@dark-text, @dark-invert-bg, @dark-dividing, @dark-title, @dark-icon, @dark-blockbg, @dark-background, @dark-primary-color);
  }
}


